<template>
  <div class="main-container">
    <layout :operation="QualityReviewShow">
      <template slot="search">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>质量管理</el-breadcrumb-item>
            <el-breadcrumb-item>质检记录</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-form inline :model="search">
          <div class="search-left">
            <el-form-item>
              <el-input v-model="search.dispatchFormNumber" class="w150" placeholder="派工单号" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.workerName" class="w150" placeholder="完工人" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="search.state" class="w150" placeholder="状态" filterable clearable>
                <template v-for="item in stateList">
                  <el-option :label="item" :value="item" :key="item"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label-width="150">
              <el-date-picker v-model="search.beginTime" type="date" placeholder="开始日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="search.endTime" type="date" placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="search-right">
            <el-button
              @click="
                clear()
                onSubmit()
              "
              >清空</el-button
            >
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <!--暂时不考虑
              <el-button type="primary">
                <a href="data:text/txt;charset=utf-8,导出下载" download="资料查询.xlsx">导出</a>
              </el-button>
          --></div>
        </el-form>
      </template>
      <template slot="operation">
        <div class="operation-left">
          <!-- <el-button
          type="primary"
          :disabled="reviewShow"
          icon="el-icon-edit"
          @click="reviewConfirm()"
        >审核</el-button> -->
          <review-confirm ref="review" @review-inspection="reviewInspection"></review-confirm>
        </div>
      </template>
      <template slot="content">
        <el-table border stripe :data="inspectionList" @row-dblclick="rowDoubleClick">
          <el-table-column type="index" label="序号" align="center" width="75"></el-table-column>
          <el-table-column prop="dispatchFormNumber" sortable label="派工单号" align="center" width="125"></el-table-column>
          <el-table-column prop="sequenceNumber" label="工序号" align="center" min-width="75"></el-table-column>
          <el-table-column prop="processName" label="工序名称" align="center" min-width="100"></el-table-column>
          <el-table-column prop="workerName" label="完成人" align="center" min-width="75"></el-table-column>
          <el-table-column prop="finishedNumber" label="完成数量" align="center" min-width="100"></el-table-column>
          <el-table-column prop="numWorkQualifiedDebug" label="调试数量" align="center" min-width="80"></el-table-column>
          <el-table-column prop="numWorkQualifiedWork" label="合格数量" align="center" min-width="80"></el-table-column>
          <el-table-column prop="numWorkPending" label="待处理数量" align="center" min-width="100"></el-table-column>
          <el-table-column prop="numWorkWasteIndustrial" label="工废数量" align="center" min-width="80"></el-table-column>
          <el-table-column prop="numWorkWasteMaterial" label="废料数量" align="center" min-width="80"></el-table-column>
          <el-table-column prop="confirmType" label="质检确认" align="center" min-width="100"></el-table-column>
          <el-table-column prop="processState" label="状态" align="center" min-width="100"></el-table-column>
          <el-table-column prop="state" label="操作" align="left" fixed="right" width="120" v-if="$checkAuth(['inspectionAudit'])">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="onClickAudit(scope.row)" v-if="scope.row.state == 3">质量审核</el-button>
              <el-button size="mini" type="primary" @click="techReview(scope.row)" v-if="scope.row.state == 4">技术评审</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleNoticeSizeChange"
          @current-change="handleNoticeCurrentChange"
          :current-page="search.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber"
          background
          class="mt10"
        >
        </el-pagination>
        <look-detail ref="lookdetail" @re-dispatch="redisatch"></look-detail>
        <tech-review-dialog ref="technicalReviewDialog" @review-confirm="onReview" />
      </template>
    </layout>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { State, namespace, Action, Mutation } from 'vuex-class'
import dayjs from 'dayjs'
import Layout from '@/views/_common/Layout.vue'
import ReviewConfirm from './reviewConfirm.vue'
import LookDetail from './lookDetail.vue'
import TechReviewDialog from './technical_review_dialog.vue'

const vuexInspection = namespace('FiveInspection')
const vuexLogin = namespace('Login')
const vuexReview = namespace('TwoReview')

@Component({
  components: {
    Layout,
    ReviewConfirm,
    LookDetail,
    TechReviewDialog
  }
})
export default class Index extends Vue {
  /**
   * 点击评审按钮，打开评审弹框
   */
  techReview(rowData) {
    this.$refs.technicalReviewDialog.getData(rowData)
    this.$refs.technicalReviewDialog.open()
  }
  async onReview(formData: any) {
    let result = await this.COMMIT_REVIEW_RESULT(formData)
    if (result) {
      this.$refs.technicalReviewDialog.close()
      this.GET_INSPECTION_LIST(this.search)
    }
  }
  @vuexReview.Action COMMIT_REVIEW_RESULT: any

  handleNoticeSizeChange(newSize) {
    // 分页功能
    this.search.pageSize = newSize
    this.GET_INSPECTION_LIST(this.search)
  }
  handleNoticeCurrentChange(newPage) {
    this.search.page = newPage
    this.GET_INSPECTION_LIST(this.search)
  }

  public $refs!: {
    review: any
    lookdetail: any
    technicalReviewDialog: any
  }

  //权限按钮
  @vuexLogin.State positionName: any
  @vuexLogin.State QualityReviewShow: any

  //接口
  @vuexInspection.State inspectionList: any
  @vuexInspection.State totalNumber: any
  @vuexInspection.Action GET_INSPECTION_LIST: any
  @vuexInspection.Action GET_INSPECTION_DETAIL: any
  @vuexInspection.Action REVIEW_INSPECTION: any
  @vuexInspection.Mutation SET_INSPACTION_LIST: any
  @vuexInspection.Mutation setInspectionState: any

  reviewShow: boolean = true

  selected: boolean = false
  // singleSelected: boolean = false
  selectId: string = '1'
  selectNumber: string = ''
  selectProcessName: string = ''
  selectDispatchNumber: string = ''
  selectState: string = ''
  selection: any[] = []
  search: any = {
    worker: '', //完工人
    dispatchFormNumber: '', //派工单号
    beginTime: '',
    endTime: '',
    page: 1,
    pageSize: 20
  }
  canAuditState: any[] = ['质量审核'] // 可以变更设计的产品状态
  stateList: String[] = ['质量确认', '质量审核', '技术评审', '已完工', '已终止']

  //页面初始化
  created() {
    this.search.dispatchProcessId = this.$route.params.dispatchProcessId
    this.GET_INSPECTION_LIST(this.search)
  }

  mounted() {
    let from = this.$route.params.from
    if (from == 'dispatch') {
      this.rowDoubleClick(this.$route.params)
    }
  }

  /**
   * TODO 待处理重新派工
   */
  redisatch(params) {
    console.log('重新派工')
    console.log(params)
    console.log(this.inspectionList)

    if (params.type == 0) {
      // 待处理合格品重新派工
      // 跳转至派工详情页面 自动填充原派工单
      this.$router.push({
        name: 'dispatch-details',
        params: {
          from: 're-dispatch',
          number: params.number,
          dispatchProcessId: this.inspectionList[0].dispatchProcessId,
          sequenceNumber: this.inspectionList[0].sequenceNumber
        }
      })
    } else {
      // 待处理返修品重新派工
      // 查询返修产品状态 是否完成了工艺设计/审批
      this.$router.push({
        name: 'menuA1DispatchRepair',
        params: {
          from: 're-dispatch',
          dispatchFormNumber: this.inspectionList[0].dispatchFormNumber,
          processName: this.inspectionList[0].processName
        }
      })
    }
  }
  reviewConfirm() {
    if (this.selectState === '质量审核') {
      this.$refs.review.open(this.selectId, this.selectNumber, this.selectDispatchNumber, this.selectProcessName)
    } else {
      this.$message({
        message: '非审核状态',
        type: 'warning'
      })
    }
  }
  //发送审核请求
  async reviewInspection(reviewData: any) {
    let result = await this.REVIEW_INSPECTION(reviewData)
    if (result) {
      this.GET_INSPECTION_LIST(this.search)
      this.$refs.review.close()
    }
  }

  async rowDoubleClick(row) {
    console.log('row.rowDoubleClick')
    console.log(row)
    await this.GET_INSPECTION_DETAIL({ dispatchProcessId: row.dispatchProcessId })
    this.setInspectionState(row.inspectionState)
    this.$refs.lookdetail.open()
  }
  clear() {
    this.search = {
      dispatchProcessId: null,
      worker: '', //完工人
      dispatchNumber: '', //派工单号
      beginTime: '', //时间范围（开始）
      endTime: '',
      state: '',
      page: 1,
      pageSize: 20
    }
  }
  onSubmit() {
    if (this.search.beginTime) {
      if (this.search.endTime) {
        this.search.endTime = dayjs(this.search.endTime).format('YYYY-MM-DD')
        this.search.beginTime = dayjs(this.search.beginTime).format('YYYY-MM-DD')
        if (this.search.endTime > this.search.beginTime) {
          this.GET_INSPECTION_LIST(this.search)
        } else {
          this.$alert('请输入搜索结束日期大于开始日期', '操作提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      } else {
        this.$alert('请同时输入搜索开始与结束日期后，进行搜索', '操作提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
    } else if (this.search.endTime) {
      if (this.search.beginTime) {
        this.search.endTime = dayjs(this.search.endTime).format('YYYY-MM-DD')
        this.search.beginTime = dayjs(this.search.beginTime).format('YYYY-MM-DD')
        if (this.search.endTime > this.search.beginTime) {
          this.GET_INSPECTION_LIST(this.search)
        } else {
          this.$alert('请输入搜索结束日期大于开始日期', '操作提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      } else {
        this.$alert('请同时输入搜索开始与结束日期后，进行搜索', '操作提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
    } else {
      this.GET_INSPECTION_LIST(this.search)
    }
  }
  selectionChange(selection: any) {
    // this.selected = selection.length > 0
    if (selection.length == 1) {
      //  this.singleSelected = selection.length === 1
      this.reviewShow = !this.reviewShow
      this.selectId = selection[0].dispatchProcessId
      this.selectNumber = selection[0].numberPending
      this.selectProcessName = selection[0].processName
      this.selectDispatchNumber = selection[0].dispatchFormNumber
      this.selectState = selection[0].state
      console.log(selection)
    } else {
      this.reviewShow = !this.reviewShow
    }
  }

  onClickAudit(inspection: any) {
    this.$refs.review.open(inspection.dispatchProcessId, inspection.numWorkPending, inspection.dispatchFormNumber, inspection.processName)
  }
}
</script>

<style lang="scss" scoped>
</style>